import GoodsModel from "@/src/lib/models/goods_model"
import Tag from '@/src/components/tag'
import { View, Image, Text, ITouchEvent } from "@tarojs/components"
import Global from "@/src/lib/global"


import { useContext } from "react"
import { PageWarpperContext } from "@/src/components/page-warpper"
import { connect } from "react-redux";

import  Event   from '@/src/dva/event';
// 创建事件总线
const eventBus = new Event ();


import "./goods-item.scss"

interface GoodsItemProps {
    model: GoodsModel
    dispatch: any
}


const GoodsItem = (props: GoodsItemProps) => {

    const { model } = props
    const ctx = useContext(PageWarpperContext)

    let onClick = () => {

        // return
        Global.navigateTo("pages/goodsdetail/index", {
            // package: "subpackages",
            params: { id: model.id }
        })
    }
    const logins=()=>{
        const { dispatch } = props

        dispatch({
            type: "cart/add",
            payload: {
                goodsid: model.id
            }
        }).then((ret) => {
            if (ret) {
            }
        })
    }


    let onAddCartBtnClick = (e: ITouchEvent<any>) => {
        e.stopPropagation()
        e.preventDefault()

        const { loginCompentRef } = ctx
        if (!Global.isLogin()) {
            loginCompentRef?.current?.show()
            eventBus.on('sayHello',logins)
            return
        }
        logins()
      
    }

    // let discountEl
    let discount = (model as GoodsModel).discount
    // if (discount && discount.length > 0) {
    //     discountEl = <Tag border="2rpx solid #999999">{(model as GoodsModel).discount}</Tag>
    // }
    // let discount = (model as GoodsModel).discount
    return (
        <View className="goods-item" onClick={onClick}>

            <Image className="goods-item-img" src={model.pic} mode="aspectFill" />

            <View className="goods-item-profile">
                <View>
                    <View className="goods-item-title">{`${model.title} ${model.tip} ${model.kouwei} ${model.hanliang}`}</View>
                    {
                        discount.length > 0 && (model as GoodsModel).tags.length <= 0 ? <Tag border="2rpx solid #999999">{(model as GoodsModel).discount}</Tag> : (model as GoodsModel).tags.length > 0 ? (model as GoodsModel).tags.map(item => {
                            return <Tag border="2rpx solid #999999">{item}</Tag>
                        }) : null
                    }

                </View>

                <View>
                    <View>
                        <Text className="goods-item-price">￥{model.realprice}</Text>
                        {
                           parseFloat(model.showprice)>0?<Text className="goods-item-price-origin">￥{model.showprice}</Text>:null
                        }
                        
                    </View>
                    <Image className="goods-item-add-cart" src={Global.loadImage("add@3x.png")} onClick={onAddCartBtnClick} />
                </View>
            </View>
        </View>
    )
}

export default connect()(GoodsItem)